<style scoped>
    .title, .author,.content{
        margin: 10px
    }
</style>
<template>
    <div>
        <!-- 查询区域 -->
        <Row style="margin:5px 0px 10px 5px" >
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
            <i-col  span="3" >
                <Button  size="default" type="info" @click="btn_create" >写笔记</Button>
            </i-col>
            <i-col span="6">
                <i-input size="default"   v-model="selectContent"  search   placeholder="输入查询内容" @on-change="btn_select_post"  @on-enter="btn_enter" >
                    <Button  size="default"  slot="append"  icon="md-search" @click="btn_select_post"></Button>
                </i-input>
            </i-col>
        </Row>

        <!-- 列表区域 -->
        <i-table size="default"   border stripe :columns="format" :data="show_list"  :height="sharedState.tableHeight"   @on-sort-change="btn_sort_change">
            <template slot-scope="{ row, index }" slot="action">
                    <Button  size="default"  type="error"   @click="del_post(index)" v-has="'delete_post'">删除</Button>
            </template>
        </i-table >
        <!-- 分页区域 -->
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :current="page" :total="total" :page-size="pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-total show-sizer/>
        </div>
    </div>
</template>

<script>
import { post } from '@/api/http'
import store from '@/store'
import { blog_list,blog_delete,blog_update_view, } from  '@/api'
// import { show_simple_page } from '@/common/util' 

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '序列号',key: 'id',align: 'center',width:100,
                    render: (h,params) => {
                        return h('div',[
                            h('a',{
                                style: {
                                    color: 'blue'
                                },
                                on: {
                                    click: ()=>{                    
                                        this.handleLink(params);
                                    }
                                }
                            },params.row.id)
                        ])
                    }
                },
                {
                    title: '文章标题',key: 'title',width:300,
                },
                {
                    title: '文章内容', key: 'content',width:300,
                    render: (h, params) => {
                        // bug content为空slice会报错
                        let texts = '';
                        if(params.row.content == null){
                            texts = null
                        }else{
                            texts = params.row.content.slice(0,50)
                        }
                        return h('div',{style:{'overflow':'auto',}}, [
                            h('p', texts)
                        ]);
                    }
                },
                {
                    title: '文章用户',key: 'user',align: 'center'
                },
                {
                    title: '浏览次数',key: 'view_count',align: 'center', sortable: 'custom',
                },
                // {
                //     title: '上次浏览时间',key: 'last_view_time',align: 'center'
                // },
                // {
                //     title: '创建时间',key: 'create_time',align: 'center'
                // },
                {
                    title: '操作',slot: 'action',align: 'center',width: 100,
                }
            ],
            // total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 30,
            page: 1,

            // 查询
            selectContent:'',
            //
            order: false,
            orderColumn: undefined,
        }
    },
    methods: {
        // bug  第二页就会执行refresh，不会走order
        btn_sort_change(column){
            this.page = 1
            this.order = true
            this.orderColumn = column
            this.refresh()
        },
        btn_enter() {
            return
        },
        btn_refresh(){
            this.page = 1
            this.selectContent = ""
            this.order = false
            this.refresh()
        },
        btn_create(){
            this.$router.push({name: 'postAdd'})
        },
        btn_select_post(){
            let selectContent = this.selectContent
            if(selectContent =='' || selectContent==null) {
                this.$Message.info("请输入查询内容")
                return
            }
            this.page = 1
            this.refresh()
        },
        changePage(page) {
            this.page=page
            this.refresh()
        },
        // 每页条数变更
        changePageSize(pageSize){
            this.pageSize = pageSize
            this.refresh()
        },

        handleLink(params){
            const { href } = this.$router.resolve({
                path: '/postDetail'
            });
            let id = params.row.id
            let data = {
                "id":id
            }
            post(blog_update_view,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('更新文章访问成功')
                }else {
                    alert("后台错误")
                    console.log(info)
                }
            })
            window.open(href+"?id="+id, '_blank');
        },
        del_post(index){
            let id = this.show_list[index].id
            let title = this.show_list[index].title
            let result = confirm("确定要删除<"+title+">吗?")
            if(result == false) return 
            let data = {"id":id}
            post(blog_delete,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除文章成功')
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },
        refresh() {
            let params = {
                "pageSize":this.pageSize,
                "page":this.page,
            }
            let data = {}

            if(this.selectContent){
                data["selectContent"] = this.selectContent
            }
            if(this.order){
                data["order"]=this.orderColumn.order
                data["key"]= this.orderColumn.key
            }

            post(blog_list,data,undefined,undefined,params).then(response=>{
                let data = response.data
                this.show_list = data.post_list
                this.total = data.total
            })
 
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
